<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ContextMenu from '@renderer/components/ContextMenu.vue'
import HumbleiconsSearch from '~icons/humbleicons/search'
import HumbleiconsCog from '~icons/humbleicons/cog'
import HumbleiconsUser from '~icons/humbleicons/user'
import HumbleiconsLogout from '~icons/humbleicons/logout'
import TitleBar from './TitleBar.vue'
import { useUserStore } from '@renderer/stores/user'
import { storeToRefs } from 'pinia'
import CatImage from '@renderer/components/CatImage.vue'
import defaultAvatar from '@renderer/assets/default_avatar.jpg'

const router = useRouter()
const route = useRoute()

const contextMenuRef = ref()
const inputSearch = ref('')
const { userAvatar, isLogin } = storeToRefs(useUserStore())
const { logout } = useUserStore()

const userAvatarSrc = computed(() => {
  return userAvatar.value ? userAvatar.value : defaultAvatar
})

async function handleSearch() {
  if (!inputSearch.value) return
  router.push({
    name: 'search',
    query: {
      keyword: inputSearch.value
    }
  })
}

async function handleLogout() {
  await logout()
  router.push({ name: 'home' })
}
</script>

<template>
  <ContextMenu ref="contextMenuRef">
    <div class="item" @click="router.push({ name: 'setting' })">
      <HumbleiconsCog class="svg-icon" />
      设置
    </div>
    <div v-if="isLogin" class="item" @click="handleLogout">
      <HumbleiconsLogout class="svg-icon" />
      登出
    </div>
    <div v-else class="item" @click="router.push({ name: 'login' })">
      <HumbleiconsUser class="svg-icon" />
      登录
    </div>
  </ContextMenu>
  <div class="nav">
    <TitleBar />
    <div class="navigation-buttons"></div>
    <div class="navigation-links">
      <button :class="{ select: route.name === 'home' }" @click="router.push({ name: 'home' })">
        首页
      </button>
      <button :class="{ select: route.name === 'search' }" @click="router.push({ name: 'search' })">
        搜索
      </button>
      <button
        :class="{ select: route.name === 'library' }"
        @click="router.push({ name: 'library' })"
      >
        音乐库
      </button>
    </div>
    <div class="right-part">
      <div class="search-box">
        <HumbleiconsSearch class="svg-icon" />
        <input
          v-model.trim="inputSearch"
          class="input"
          type="search"
          placeholder="搜索"
          :spellcheck="false"
          @keyup.enter="handleSearch"
        />
      </div>
      <CatImage class="avatar" :src="userAvatarSrc" @click="(e) => contextMenuRef.open(e)" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav {
  padding: 0 max(5vw, 90px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;

  .navigation-buttons {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .navigation-links {
    flex: 1;
    display: flex;
    justify-content: center;
    text-transform: uppercase;

    button {
      font-size: 18px;
      font-weight: 700;
      text-decoration: none;
      border-radius: 6px;
      padding: 6px 10px;
      color: var(--color-text);
      transition: 0.2s;
      margin-right: 12px;
      margin-left: 12px;

      &.select {
        color: var(--color-primary);
      }

      &:hover {
        transform: scale(1.06);
      }
    }
  }

  .right-part {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .search-box {
      display: flex;
      align-items: center;
      height: 32px;
      background: var(--color-secondary-bg-for-transparent);
      border-radius: 8px;
      width: 200px;

      .svg-icon {
        height: 20px;
        width: 20px;
        color: var(--color-text);
        opacity: 0.28;
        margin-left: 8px;
        margin-right: 4px;

        &:deep(path) {
          stroke-width: 2.5;
        }
      }

      .input {
        font-size: 16px;
        border: none;
        background: transparent;
        width: 96%;
        font-weight: 600;
        margin-top: -1px;
        color: var(--color-text);
      }
    }

    .avatar {
      width: 30px;
      height: 30px;
      margin-left: 12px;
      vertical-align: -7px;
      border-radius: 50%;
      cursor: pointer;

      &:hover {
        filter: brightness(80%);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
